<template>
  <!-- 下拉框 -->
  <el-select
    ref="elSelect"
    v-bind="attrs"
    v-on="$listeners"
    v-model="modelValue"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
import { getAllArea } from "@/api/revenue/area";
import { getAllMeterTable } from "@/api/revenue/meterTable";
import { getUserByRole } from "@/api/system/user";
import { getUser } from "@/utils/auth";
import { listSimpleDepts } from "@/api/system/dept";
import { listDeptsByTenantId } from "@/api/cts/ctsSso";
import { getFaultConfigList } from "@/api/cts/faultConfig";

export default {
  props: {
    value: {
      type: [String, Number, Array],
      default: "",
    },
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      modelValue: "",
      options: [],
      first: true,
      attrs: {},
    };
  },
  watch: {
    config: {
      handler(val) {
        if (this.first) {
          this.initOptions();
        } else {
          this.setOptions();
        }
        this.getAttrs();
      },
      immediate: true,
      deep: true,
    },
    value: {
      handler(val) {
        this.modelValue = val;
        if(val===""){
          this.$emit("change", val, "");
        }
      },
      immediate: true,
    },
    modelValue: {
      handler(val) {
        this.$emit("input", val);
        // this.$emit(
        //   "change",
        //   val,
        //   this.options?.find((e) => e.value === val)?.label ?? ""
        // );
      },
    },
    options: {
      handler(val) {
        this.$emit("optionsChange", val ?? []);
        // this.$emit(
        //   "change",
        //   val,
        //   this.options?.find((e) => e.value === this.modelValue)?.label ?? ""
        // );
      },
    },
  },
  created() {},
  computed: {},
  mounted() {
    this.getAttrs();
  },
  methods: {
    getAttrs() {
      let res = {};
      let obj = { ...this.config, ...this.$attrs };
      for (let key in this.$refs?.elSelect?.$props) {
        res[key] = obj[key] ?? this.$refs?.elSelect?.$props?.[key];
      }
      res.placeholder = obj.placeholder ?? "请选择" + obj.label;
      if (obj.disabled) res.placeholder = "-";
      this.attrs = res;
    },
    /** 初始化下拉，只初始化一次 */
    initOptions() {
      this.first = false;
      this.options = [];
      if (this.config.options?.length > 0) {
        this.options = this.config.options || [];
        return;
      }
      if (this.config.dictType) {
        this.options = this.getDictDatas(this.config.dictType);
        return;
      }
      // 部门下拉
      if (["disposeDeptId", "deptId"].includes(this.config.prop)) {
        listDeptsByTenantId().then((res) => {
          this.options = res.data.map((e) => {
            return {
              label: e.name,
              value: e.id,
            };
          });
        });
        return;
      }
      // 工单类型
      if (this.config.prop === "orderTypeId") {
        getFaultConfigList({ faultLevel: 1, isEnabled: 1 }).then((res) => {
          this.options = res.data.map((item) => {
            return {
              label: item.faultName,
              value: item.id,
            };
          });
        });
      }
    },
    /** 设置下拉数据 */
    setOptions() {
      this.options = this.config.options ?? this.options;
    },
  },
};
</script>

<style></style>
